1.安装脚手架
npm install -g @angular/cli
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果有警告修改环境变量
2.新建项目 cd 文件
ng new 项目名
跳过依赖包
ng new 项目名 --skip-install
3.编译运行
ng serve --open
4.在vscode中编译,代码高亮 安装插件
5.安装组件
ng g component components/home
创建提个home组件
6.各个目录结构的含义
7.ts的空模板
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
//第一变量
constructor() { }
ngOnInit() {
}
//定义方法
}
8.路由跳转script中
点击事件触发
Ts
{
path: 'tab3',
component:Tab3Component,
children: []
},
//html按钮
<button (click)="tab3()">进入tab3</button>
//路由
tab3(){
this.router.navigateByUrl("tab3")
//或者是以下这种
this.router.navigate(["tab3"])
}
9.父子组件之间的传值
父组件
<app-header [title]="title"></app-header>
定义属性
title='我是父组件的title'
子组件
1.引入Input模块
import { NgModule,Input } from '@angular/core';
@Input() title:any;
10.父组件传方法 父组件自己的全部给子组件
父组件
<app-header [run]="run"></app-header>
alert("sasss")
}
子组件
<button (click)="getMethod()">点击</button>
@Input() run:any;
getMethod(){
this.run();//加括号表示执行
}
执行方法
传整体
<app-header [home]="this"></app-header>
子组件
<button (click)="getMethod()">点击</button>
@Input() home:any;
getMethod(){
this.home.run()
}
传方法与父组件全部都要经过事件处理
11.父组件获取子组件
@ViewChild
子组件定义一个属性
public childinfo:any="我是子组件的数据"
childmethod(){
alert("我是子组件的方法")
}
父组件
import { NgModule,ViewChild } from '@angular/core';
@ViewChild('footer') footer:any;
通过事件触发
<button (click)="childrun()">点击获取子组件的值</button>
childrun(){
alert(this.footer.childinfo);
}
childrun(){
this.footer.childmethod()//执行子组件的方法
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。